<template>
  <div>
    <!-- 分配权限的弹层 -->
    <el-dialog
      title="分配权限(一级为路由页面查看权限-二级为按钮操作权限)"
      :visible="showAssignDialog"
      @close="closeDialogFn"
      @open="openFn"
    >
      <!-- 树形数据 -->
      <el-tree
        ref="tree"
        :data="permissionList"
        :props="{ label: 'name' }"
        :default-expand-all="true"
        :show-checkbox="true"
        :check-strictly="true"
        node-key="id"
      />
      <!-- 权限点数据展示 -->
      <template #footer>
        <div style="text-align: right;">
          <el-button @click="closeDialogFn">取消</el-button>
          <el-button type="primary" @click="confirmFn">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionListAPI } from '@/api/permission'
import { assignPermAPI, getRoleDetailAPI } from '@/api/setting'
import { transData } from '@/utils/index'
export default {
  props: {
    showAssignDialog: {
      type: Boolean
    },
    curId: { // 当前角色id
      type: String,
      default: null
    }
  },
  data() {
    return {
      permissionList: [] // 存储权限数据

    }
  },
  methods: {
    // 关闭弹框
    closeDialogFn() {
      this.$emit('close-dialog')
    },
    async getPermissionList() {
      const res = await getPermissionListAPI()
      // this.permissionList = res.data
      this.permissionList = transData(res.data)
    },
    // 打开弹框前
    openFn() {
      this.getPermissionList()
      // 回显
      this.getRoleDetail()
    },
    // 确定按钮
    async confirmFn() {
      // console.log(this.$refs.tree.getCheckedNodes())
      const permIds = this.$refs.tree.getCheckedNodes().map(item => item.id)
      // 分配权限
      await assignPermAPI({ id: this.curId, permIds })
      this.$message.success('分配权限成功')
      this.showAssignDialog = false
    },
    // 回显
    async getRoleDetail() {
      const res = await getRoleDetailAPI(this.curId)
      // console.log(res.data.permIds)
      this.$refs.tree.setCheckedKeys(res.data.permIds)
    }
  }

}
</script>

<style>

</style>
